<template>
    <div>
        <roofVue title="注册"></roofVue>
        <h1>注册</h1>
        <van-form @submit="submit" validate-first>
            <van-field
                name="dator"
                label="用户名"
                placeholder="请输入用户名"
                v-model="username"
                :rules="[{ validator: dator, message: '请正确填写手机号' }]"
            />
            <span>{{ validatorname }}</span>
            <van-field
                type="password"
                name="密码"
                label="密码"
                placeholder="请输入密码"
                v-model="pwd"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
                type="password"
                name="密码"
                label="确认密码"
                placeholder="请再次输入密码"
                v-model="pwd2"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import roofVue from "../other/roof.vue"
export default {
    data() {
        return {
            username: '',
            pwd: '',
            pwd2: '',
            validatorname: ""
        }
    },
    components: {
        roofVue
    },
    methods: {
        submit() {

            if (this.pwd.length < 6 || this.pwd2.length < 6) {
                return this.$dialog({ message: "密码长度不能低于六位" })
            } else if (this.pwd != this.pwd2) {
                this.pwd2 = ""
                return this.$dialog({ message: 两次密码不相同 })
            } else if (this.validatorname == "此用户已存在") {
                return
            } else {
                this.$post(this.$url + "/register", {
                    "userName": this.username,
                    "pwd": this.pwd,
                }).then(res => {
                    if (res.errorCode == '0') {
                        this.$notify({ type: "success", message: "注册成功" })
                    } else {
                        this.$dialog({ message: "注册失败" })
                    }
                }).catch(err => {
                    this.$dialog({ message: "注册失败" })
                })
            }
        },
        dator(val) {
            this.$post(this.url + "get/user/info", {
                userName: val
            }).then(res => {
                if (res.errorCode == '0') {
                    this.validatorname = "此用户已存在";
                } else {
                    this.validatorname = "";
                }
            })
            return /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(
                val
            );
        },
    },
}
</script>

<style  scoped>
</style>